---
title: Rating
description: Used to show reviews and ratings in a visual format.
links:
  storybook: components-rating--basic
  recipe: rating
  ark: https://ark-ui.com/react/docs/components/rating-group
---

<ExampleTabs name="rating-basic" />

## Usage

```tsx
import { RatingGroup } from "@chakra-ui/react"
```

```tsx
<RatingGroup.Root>
  <RatingGroup.Label />
  <RatingGroup.HiddenInput />
  <RatingGroup.Control>
    <RatingGroup.Item>
      <RatingGroup.ItemIndicator />
    </RatingGroup.Item>
  </RatingGroup.Control>
</RatingGroup.Root>
```

:::info

If you prefer a closed component composition, check out the
[snippet below](#closed-component).

:::

## Shortcuts

The `Rating` component also provides a set of shortcuts for common use cases.

### RatingControl

This component renders the number of rating items specified in the `count` prop.

This works:

```tsx
<RatingGroup.Control>
  {Array.from({ length: 5 }).map((_, index) => (
    <RatingGroup.Item key={index} index={index + 1}>
      <RatingGroup.ItemIndicator />
    </RatingGroup.Item>
  ))}
</RatingGroup.Control>
```

This might be more concise, if you don't need to customize the rating icons:

```tsx
<RatingGroup.Control />
```

## Examples

### Basic

<ExampleTabs name="rating-basic" />

### Sizes

Use the `size` prop to change the size of the rating component.

<ExampleTabs name="rating-with-sizes" />

### Controlled

Use the `value` and `onValueChange` prop to control the rating value.

<ExampleTabs name="rating-controlled" />

### Store

An alternative way to control the rating is to use the `RootProvider` component
and the `useRatingGroup` store hook.

This way you can access the rating state and methods from outside the component.

<ExampleTabs name="rating-with-store" />

### ReadOnly

Use the `readOnly` prop to make the rating component read-only.

<ExampleTabs name="rating-with-readonly" />

### Hook Form

Here's an example of how to use rating with `react-hook-form`.

<ExampleTabs name="rating-with-hook-form" />

### Custom Icon

Use the `icon` prop to pass a custom icon to the rating component. This will
override the default star icon.

<ExampleTabs name="rating-with-custom-icon" />

### Label

Render the `RatingGroup.Label` component to provide a human-readable label for
the rating component.

<ExampleTabs name="rating-with-label" />

### Half Star

Use the `allowHalf` prop to allow half-star ratings.

<ExampleTabs name="rating-with-half" />

### Emoji

Compose the rating component with emojis.

<ExampleTabs name="rating-emoji" />

### Colors

Use the `colorPalette` prop to change the color of the rating

<ExampleTabs name="rating-with-colors" />

### Testimonial

Use the rating component to show testimonials.

<ExampleTabs name="rating-in-testimonial" />

### Closed Component

Here's how to setup the Rating for a closed component composition.

<ExampleCode name="rating-closed-component" />

Here's how to use the it

```tsx
<Rating defaultValue={3} size="sm" />
```

## Props

### Root

<PropTable component="RatingGroup" part="Root" />

### Item

<PropTable component="RatingGroup" part="Item" />
